<!DOCTYPE html>
<html class="support-no-js">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>js-Offcanvas Test Suite</title>
	<link rel="stylesheet" href="../dist/_css/prefixed/js-offcanvas.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

	<script src="../vendor/modernizr.js"></script>
	<script src="../dist/_js/js-offcanvas.pkgd.js"></script>
	<script>
		// https://github.com/filamentgroup/AppendAround
		/*! appendAround markup pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL
		 how-to:
		 1. Insert potential element containers throughout the DOM
		 2. give each container a data-set attribute with a value that matches all other containers' values
		 3. Place your appendAround content in one of the potential containers
		 4. Call appendAround() on that element when the DOM is ready
		 */
		(function( $ ){
			$.fn.appendAround = function(){
				return this.each(function(){

					var $self = $( this ),
							att = "data-set",
							$parent = $self.parent(),
							parent = $parent[ 0 ],
							attval = $parent.attr( att ),
							$set = $( "["+ att +"='" + attval + "']" );

					function isHidden( elem ){
						return $(elem).css( "display" ) === "none";
					}

					function appendToVisibleContainer(){
						if( isHidden( parent ) ){
							var found = 0;
							$set.each(function(){
								if( !isHidden( this ) && !found ){
									$self.appendTo( this );
									found++;
									parent = this;
								}
							});
						}
					}

					appendToVisibleContainer();

					$(window).bind( "resize", appendToVisibleContainer );

				});
			};
		}( jQuery ));
	</script>
	<script>
		$( function(){

			$( document ).bind( "create.offcanvas", function( e ){
				$(e.target).removeClass('is-hidden');
			} );

			$( '#right' ).offcanvas( {
				modifiers: "right,overlay",
				triggerButton: '.js-offcanvas-toggler'
			} );

			$( '#left' ).offcanvas( {
				modifiers: "left,push",
				triggerButton: '.js-sidebar-toggler'
			} );

			$( ".js-append-around" ).appendAround();

			$( document ).trigger( "enhance" );
		});
	</script>
	<style>
		/*
         * Dashborad Base structure
         */

		/* Move down content because we have a fixed navbar that is 3.5rem tall */
		body {
			padding-top: 3.5rem;
		}

		h1 {
			margin-bottom: 20px;
			padding-bottom: 9px;
			border-bottom: 1px solid #eee;
		}

		.sidebar {
			position: fixed;
			top: 51px;
			bottom: 0;
			left: 0;
			z-index: 1000;
			padding: 20px;
			overflow-x: hidden;
			overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
			border-right: 1px solid #eee;
		}

		/* Sidebar navigation */
		.sidebar {
			padding-left: 0;
			padding-right: 0;
		}

		.sidebar .nav {
			margin-bottom: 20px;
		}

		.sidebar .nav-item {
			width: 100%;
		}

		.sidebar .nav-item + .nav-item {
			margin-left: 0;
		}

		.sidebar .nav-link {
			border-radius: 0;
		}
		/* Placeholders */
		.placeholders {
			padding-bottom: 3rem;
		}
		.placeholder img {
			padding-top: 1.5rem;
			padding-bottom: 1.5rem;
		}
		.form-signin {
			max-width: 330px;
			padding: 15px;
			margin: 0 auto;
		}
		.form-signin .form-signin-heading,
		.form-signin .checkbox {
			margin-bottom: 10px;
		}
		.form-signin .checkbox {
			font-weight: normal;
		}
		.form-signin .form-control {
			position: relative;
			height: auto;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			padding: 10px;
			font-size: 16px;
		}
		.form-signin .form-control:focus {
			z-index: 2;
		}
		.form-signin input[type="email"] {
			margin-bottom: -1px;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}
		.form-signin input[type="password"] {
			margin-bottom: 10px;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}



		/* DEMO - DASHBORD*/
		.offcanvas-nav .form-inline { display: none}
		.is-hidden {  visibility: hidden;}
		html, body  {
			overflow-x: hidden;
			overflow-y: scroll;
		}
		.container { overflow: hidden}
		.c-offcanvas-content-wrap {
			transform: none;
		}
		.c-offcanvas {
			top: 3.5rem;
		}
		.c-offcanvas--top {
			top: 0;
			height: 16.5em;
			transform: translate3d(0, -16.5em, 0);
			z-index: 1030;
		}

		.c-offcanvas-content-wrap {
			transform: none;
			left:0;
			transition-property: left;
		}
		.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open {
			transform: none;
			left: 17em;
		}
		.has-offcanvas--visible.has-offcanvas--right .c-button--left,
		.has-offcanvas--visible.has-offcanvas--left .c-button--right {
			opacity:0.25;
			pointer-events: none;
		}
</style>
</head>
<body>
			<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
				<button class="navbar-toggler d-block d-sm-none js-sidebar-toggler" data-button-options='{"modifiers":"left","wrapText":false}' aria-label="Toggle Sidebar">
					<span class="navbar-toggler-icon"></span>
				</button>
				<a class="navbar-brand" href="#">Navbar</a>
				<button class="navbar-toggler js-offcanvas-toggler" data-button-options='{"modifiers":"right","wrapText":false}' aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarsExampleDefault" data-set="bs">
					<ul class="navbar-nav mr-auto js-append-around">
						<li class="nav-item active">
							<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
							<div class="dropdown-menu" aria-labelledby="dropdown01">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
					</ul>
					<form class="form-inline my-2 my-lg-0 js-append-around">
						<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
						<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
					</form>
				</div>
			</nav>
			<div class="">

				<div class="c-offcanvas-content-wrap">

				<div class="container-fluid">
					<div class="row">
						<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar" data-set="bs-sidebar">
							<div class="js-append-around">
								<ul class="nav nav-pills flex-column">
									<li class="nav-item">
										<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Reports</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Analytics</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Export</a>
									</li>
								</ul>

								<ul class="nav nav-pills flex-column">
									<li class="nav-item">
										<a class="nav-link" href="#">Nav item</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Nav item again</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">One more nav</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Another nav item</a>
									</li>
								</ul>

								<ul class="nav nav-pills flex-column">
									<li class="nav-item">
										<a class="nav-link" href="#">Nav item again</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">One more nav</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#">Another nav item</a>
									</li>
								</ul>

							</div>
						</nav>

						<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
							<h1>Dashboard</h1>
							<p class="lead">
								<a href="#" class="btn btn-lg btn-secondary" data-offcanvas-trigger="top">Login</a>
							</p>
							<section class="row text-center placeholders">
								<div class="col-6 col-sm-3 placeholder">
									<img src="" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
									<h4>Label</h4>
									<div class="text-muted">Something else</div>
								</div>
								<div class="col-6 col-sm-3 placeholder">
									<img src="" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
									<h4>Label</h4>
									<span class="text-muted">Something else</span>
								</div>
								<div class="col-6 col-sm-3 placeholder">
									<img src="" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
									<h4>Label</h4>
									<span class="text-muted">Something else</span>
								</div>
								<div class="col-6 col-sm-3 placeholder">
									<img src="" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
									<h4>Label</h4>
									<span class="text-muted">Something else</span>
								</div>
							</section>

							<h2>Section title</h2>
							<div class="table-responsive">
								<table class="table table-striped">
									<thead>
									<tr>
										<th>#</th>
										<th>Header</th>
										<th>Header</th>
										<th>Header</th>
										<th>Header</th>
									</tr>
									</thead>
									<tbody>
									<tr>
										<td>1,001</td>
										<td>Lorem</td>
										<td>ipsum</td>
										<td>dolor</td>
										<td>sit</td>
									</tr>
									<tr>
										<td>1,002</td>
										<td>amet</td>
										<td>consectetur</td>
										<td>adipiscing</td>
										<td>elit</td>
									</tr>
									<tr>
										<td>1,003</td>
										<td>Integer</td>
										<td>nec</td>
										<td>odio</td>
										<td>Praesent</td>
									</tr>
									<tr>
										<td>1,003</td>
										<td>libero</td>
										<td>Sed</td>
										<td>cursus</td>
										<td>ante</td>
									</tr>
									<tr>
										<td>1,004</td>
										<td>dapibus</td>
										<td>diam</td>
										<td>Sed</td>
										<td>nisi</td>
									</tr>
									<tr>
										<td>1,005</td>
										<td>Nulla</td>
										<td>quis</td>
										<td>sem</td>
										<td>at</td>
									</tr>
									<tr>
										<td>1,006</td>
										<td>nibh</td>
										<td>elementum</td>
										<td>imperdiet</td>
										<td>Duis</td>
									</tr>
									<tr>
										<td>1,007</td>
										<td>sagittis</td>
										<td>ipsum</td>
										<td>Praesent</td>
										<td>mauris</td>
									</tr>
									<tr>
										<td>1,008</td>
										<td>Fusce</td>
										<td>nec</td>
										<td>tellus</td>
										<td>sed</td>
									</tr>
									<tr>
										<td>1,009</td>
										<td>augue</td>
										<td>semper</td>
										<td>porta</td>
										<td>Mauris</td>
									</tr>
									<tr>
										<td>1,010</td>
										<td>massa</td>
										<td>Vestibulum</td>
										<td>lacinia</td>
										<td>arcu</td>
									</tr>
									<tr>
										<td>1,011</td>
										<td>eget</td>
										<td>nulla</td>
										<td>Class</td>
										<td>aptent</td>
									</tr>
									<tr>
										<td>1,012</td>
										<td>taciti</td>
										<td>sociosqu</td>
										<td>ad</td>
										<td>litora</td>
									</tr>
									<tr>
										<td>1,013</td>
										<td>torquent</td>
										<td>per</td>
										<td>conubia</td>
										<td>nostra</td>
									</tr>
									<tr>
										<td>1,014</td>
										<td>per</td>
										<td>inceptos</td>
										<td>himenaeos</td>
										<td>Curabitur</td>
									</tr>
									<tr>
										<td>1,015</td>
										<td>sodales</td>
										<td>ligula</td>
										<td>in</td>
										<td>libero</td>
									</tr>
									</tbody>
								</table>
							</div>
						</main>
					</div>
				</div>
			</div>

			</div>

		<div class="c-offcanvas is-hidden" id="right">
			<div class="navbar">
				<button type="button" class="btn btn-block btn-outline-dark js-offcanvas-close">Close</button>
				<div class="input-group mt-3">
					<input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
					<span class="input-group-btn">
					<button class="btn btn-secondary" type="button">Go!</button>
				  </span>
				</div>
				<!-- container for appendAround -->
				<div class="offcanvas-nav d-block d-md-none" data-set="bs"></div>
			</div>
		</div>

		<div class="c-offcanvas is-hidden" id="left">
			<!-- container for appendAround -->
			<div class="offcanvas-nav d-block d-sm-none" data-set="bs-sidebar"></div>
		</div>
		<div class="c-offcanvas is-hidden js-offcanvas" data-offcanvas-options='{"modifiers":"top,fixed,overlay"}' id="top">
			<form class="form-signin">
				<h2 class="form-signin-heading">Please sign in</h2>
				<label for="inputEmail" class="sr-only">Email address</label>
				<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
				<label for="inputPassword" class="sr-only">Password</label>
				<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="remember-me"> Remember me
					</label>
				</div>
				<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
			</form>
		</div>
</body>
</html>
